<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
</head>
<body>
  <div id="root">
      <h1>{{name}}</h1>
  </div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
   const vm = new Vue({
       //由Vue管理的函数(也就是通过vm.的方式进行调用，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
       //不被Vue管理的函数一定要写成箭头函数，因为不被Vue直接管理的函数一般定义在Vue管理的函数中
       //如果写成普通函数因为函数内部的函数不能直接被调用的话this就是window，而写成箭头函数就和外部的函数的this一样就是vm
       //data属性也可以写成一个函数，但是必须在返回值里返回data中的数据
       //同理写成函数比写成变量的可操作性强很多
       data(){
           return{
               name:"Alice"
           }
       }
   });
     //这样写的好处是渲染的时机很灵活，可以在这写一个定时器过一段时间再进行渲染
     //写在构造函数内部就无法在外部进行控制了
     //因为传入的el最后会绑定到VM上，所以可以使用VM进行操作
     vm.$mount('#root')

</script>
</body>
</html>